<template>
  <view class="container" v-if="Object.keys(detailData.info).length">
    <sc-navbar back title="补货"></sc-navbar>
    <glo-gutter>
      <glo-chunk>
        <sc-flex ai="center" jc="between">
          <sc-flex ai="center" col-gap="22.5">
            <glo-title title="图片识别"></glo-title>
            <sc-text color="primary" size="15" text="查看示例" @click="uni.$sc.push('/subDingHe/pages/example')
              "></sc-text>
          </sc-flex>
          <sc-button font-size="18" height="37" text="识别" type="primary" width="135"></sc-button>
        </sc-flex>
        <sc-text color="#767676" size="19" text="上传骨钉层&骨板(棒)图片确保清晰，信息完整，最多上传9张"></sc-text>
        <sc-view padding="13rpx 0">
          <up-upload :fileList="fileList" :maxCount="9" height="90rpx" multiple name="1" width="90rpx"
            @afterRead="afterRead" @delete="deletePic"></up-upload>
        </sc-view>
        <sc-flex ai="center" col-gap="22">
          <sc-flex v-for="item in replenishColor" :key="item.name" ai="center" col-gap="15">
            <view :style="{ background: item.color }" class="recognize-color"></view>
            <text class="recognize-name">{{ item.name }}</text>
          </sc-flex>
        </sc-flex>
      </glo-chunk>
      <glo-chunk>
        <sc-flex>
          <sc-image height="37" src="/static/imgs/ic_wenda.png" width="37"></sc-image>
          <glo-title :title="`当前层(板)：${detailData.info.boardCode}`"></glo-title>
        </sc-flex>
        <sc-flex col-gap="22" padding="7rpx 0 17rpx">
          <glo-statistics :statistics="[
            { name: '所含数量', value: detailData.info.containCount },
          ]"></glo-statistics>
          <glo-statistics :statistics="[
            { name: '剩余商品数量', value: detailData.info.remainingCount || 0 },
          ]"></glo-statistics>
        </sc-flex>
        <sc-image height="515" src="/static/imgs/empty.png" width="100%"></sc-image>
      </glo-chunk>
      <view class="goods-wrap">
        <view class="goods-head">
          <glo-tabs :list="tabsList" type="center" @change="changeTab"></glo-tabs>
        </view>
        <sc-view padding="15rpx 0 19rpx">
          <glo-search placeholder="请输入关键字搜索"></glo-search>
        </sc-view>
        <sc-grid row="auto" row-gap="13">
          <glo-chunk shadow v-for="value in detailData[detailData.activeTab]" :key="value.id"
            @click="selectGoods(value)">
            <sc-flex ai=" center" jc="between">
              <sc-flex ai="center" col-gap="10">
                <glo-choice :selected="value.selected"></glo-choice>
                <glo-title :title="`${value.productName}【${value.tailorismName}】`"></glo-title>
              </sc-flex>
              <sc-icon color="primary" name="arrow-right" size="20"></sc-icon>
            </sc-flex>
            <sc-flex ai="center" col-gap="34" mt="19">
              <sc-image height="90" :src="value.productImageAddress" width="90"></sc-image>
              <glo-info :info="getGoodInfo(value)"></glo-info>
            </sc-flex>
            <sc-flex col-gap="22" mt="18" row-gap="10" wrap="wrap">
              <glo-statistics :statistics="[
                { name: '所含数量', value: value.containCount },
              ]"></glo-statistics>
              <glo-statistics :statistics="[
                {
                  name: '待补货商品数量',
                  value: value.coordinatesList.length,
                  icon: value.coordinatesList,
                },
              ]" @select="selectDing"></glo-statistics>
            </sc-flex>
          </glo-chunk>
        </sc-grid>
      </view>
    </glo-gutter>
    <sc-footer height="198">
      <sc-view height="100%" padding="26rpx 57rpx 0 47rpx" width="100%">
        <sc-flex ai="center" jc="between">
          <sc-flex ai="center" @click="selectAll">
            <sc-view pr="10">
              <glo-choice :selected="operationData.isAll"></glo-choice>
            </sc-view>
            <sc-text color="#3D3D3D" size="23" text="全选，已选"></sc-text>
            <sc-text color="#1677FF" size="23" :text="operationData.num"></sc-text>
            <sc-text color="#3D3D3D" size="23" text="项"></sc-text>
          </sc-flex>
          <sc-flex ai="center" col-gap="13">
            <sc-button v-if="detailData.activeTab === 'sysp'" height="37" text="删除" type="line" width="135"
              @click="restockAndDelete('delete')"></sc-button>
            <template v-if="detailData.activeTab === 'bhsp'">
              <sc-button height="37" text="一键补货" type="line" width="135"
                @click="restockAndDelete('restock')"></sc-button>
              <sc-button height="37" text="手动补货" type="line" width="135"
                @click="uni.$sc.push('/subPublic/pages/replenishManual')"></sc-button>
            </template>
          </sc-flex>
        </sc-flex>
        <sc-flex ai="center" jc="between" mt="15">
          <sc-button height="75" text="删除" type="grey-red" width="300"></sc-button>
          <sc-button height="75" text="确认" type="primary" width="300"></sc-button>
        </sc-flex>
      </sc-view>
    </sc-footer>
    <glo-remind v-model="remindData.show" :content="remindData.content"></glo-remind>
  </view>
</template>

<script setup>
const replenishColor = ref([
  {
    name: "剩余",
    color: "#0FE6FE",
  },
  {
    name: "待补货",
    color: "#FF3535",
  },
  {
    name: "已选中",
    color: "#0F67FE",
  },
  {
    name: "损坏",
    color: "#FF9D35",
  },
  {
    name: "遗失",
    color: "#FFE435",
  },
]);

const tabsList = ref([
  {
    id: 0,
    name: "剩余商品",
    type: "sysp",
    num: 0,
  },
  {
    id: 1,
    name: "补货商品",
    type: "bhsp",
    num: 0,
  },
]);

const changeTab = (item) => {
  detailData.sysp.forEach((item) => (item.selected = false));
  detailData.bhsp.forEach((item) => (item.selected = false));
  operationData.isAll = false;
  operationData.num = 0;
  detailData.activeTab = item.type;
}
const getGoodInfo = (val) => [
  { type: "single", label: "商品编码", value: val.tailorismCode },
  {
    type: "multiple",
    columns: "1fr 1fr",
    list: [
      { type: "single", label: "规格", value: val.specifications },
      { type: "single", label: "型号", value: val.model },
    ],
  },
  { type: "single", label: "UDI编码", value: val.udiCode },
  {
    type: "single",
    label: "注册证号",
    value: val.registrationCertificateNumber,
  },
  { type: "single", label: "批号", value: val.productBatchNumber },
];

/**
 * 详情数据
 */
const detailData = reactive({
  activeTab: "sysp",
  info: {},
  sysp: [],
  bhsp: [],
});
const getDetail = () => {
  _api.getStockInfoByNailboxCode(useTemporaryStore().replenish).then((res) => {
    detailData.info = res;
    detailData.sysp = uni.$u.deepClone(res.remainingProductEntityManagementStockVOList);
    detailData.bhsp = uni.$u.deepClone(res.restockProductEntityManagementStockVOList);
    detailData.sysp.forEach((item) => {
      item.selected = false;
    });
    detailData.bhsp.forEach((item) => {
      item.selected = false;
    });
    tabsList.value[0].num = res.remainingProductCount;
    tabsList.value[1].num = res.stockProductCount;
  });
};
getDetail();

const selectDing = (val) => {
  console.log("🚀 selectDing", val);
};
const remindData = reactive({
  show: false,
  content: "请选择商品后进行补货操作",
});
const fileList = ref([]);
const afterRead = (e) => {
  console.log("🚀 e", e);
};
const deletePic = (e) => {
  console.log("🚀 e", e);
};

const operationData = reactive({
  isAll: false,
  num: 0,
});

const selectGoods = (val) => {
  val.selected = !val.selected;
  operationData.num = detailData[detailData.activeTab].filter((item) => item.selected).length;

  // 检查是否所有商品都被选中，如果是则激活全选按钮
  const currentTabItems = detailData[detailData.activeTab];
  const allSelected = currentTabItems.length > 0 && currentTabItems.every((item) => item.selected);
  operationData.isAll = allSelected;
};

const selectAll = () => {
  operationData.isAll = !operationData.isAll;
  detailData[detailData.activeTab].forEach((item) => {
    item.selected = operationData.isAll;
  });
  operationData.num = detailData[detailData.activeTab].filter((item) => item.selected).length;
};
const restockAndDelete = async (type) => {
  const ids = detailData[detailData.activeTab].filter((item) => item.selected).map((item) => item.id).join(',');
  if (ids.length === 0) {
    remindData.show = true;
    return;
  }
  if (type === 'restock') {
    await _api.copyStockInfoByNailboxCode(ids).then(() => {
      uni.$sc.toast('一键补货成功');
    });
  } else if (type === 'delete') {
    await _api.deleteProductEntity(ids).then(() => {
      uni.$sc.toast('删除成功');
    });
  }
  operationData.isAll = false;
  operationData.num = 0;
  getDetail();
};
</script>
<style lang="scss">
page {
  background: $color-bg;
}
</style>
<style lang="scss" scoped>
.recognize-color {
  width: 15rpx;
  height: 15rpx;
  border-radius: 50%;
}

.recognize-name {
  color: #3d3d3d;
  font-weight: 400;
  font-size: 19rpx;
  font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
}

.goods-wrap {
  padding: 20rpx 25rpx 20rpx 32rpx;
  border-radius: 8rpx;
  background: rgba(255, 255, 255, 0.5);

  .goods-head {
    position: relative;

    >image {
      position: absolute;
      top: 50%;
      right: 0;
      width: 30rpx;
      height: 30rpx;
      transform: translateY(-50%);
    }
  }
}
</style>
